<template>
  <div>
    <van-nav-bar title="合同条款" />
    <van-form>
      <van-cell-group inset>
        <div>
          <van-field
            v-model="contractTerms.paymentMethodTerms"
            name="结算方式及期限条款"
            label="结算方式及期限条款"
            placeholder="结算方式及期限条款"
            :rules="[{ required: isEdit, message: '请填写结算方式及期限条款' }]"
          />
          <van-field
            v-model="contractTerms.paymentMethodTermsContent"
            name="条款内容"
            label="条款内容"
            placeholder="条款内容"
            :rules="[{ required: isEdit, message: '请填写条款内容' }]"
          />
          <van-field
            v-model="contractTerms.paymentMethodTermsParam"
            name="参数"
            label="参数"
            placeholder="参数"
            :rules="[{ required: isEdit, message: '请填写参数' }]"
          />
          <van-field
            v-model="contractTerms.deliveryTerms"
            name="交提货点条款"
            label="交提货点条款"
            placeholder="交提货点条款"
            :rules="[{ required: isEdit, message: '请填写交提货点条款' }]"
          />
          <van-field
            v-model="contractTerms.deliveryTermsContent"
            name="条款内容"
            label="条款内容"
            placeholder="条款内容"
            :rules="[{ required: isEdit, message: '请填写条款内容' }]"
          />
          <van-field
            v-model="contractTerms.deliveryTermsParam"
            name="参数"
            label="参数"
            placeholder="参数"
            :rules="[{ required: isEdit, message: '请填写参数' }]"
          />
          <van-field
            v-model="contractTerms.transportTerms"
            name="运输方式条款"
            label="运输方式条款"
            placeholder="运输方式条款"
            :rules="[{ required: isEdit, message: '请填写运输方式条款' }]"
          />
          <van-field
            v-model="contractTerms.transportTermsContent"
            name="条款内容"
            label="条款内容"
            placeholder="条款内容"
            :rules="[{ required: isEdit, message: '请填写条款内容' }]"
          />
          <van-field
            v-model="contractTerms.transportTermsParam"
            name="参数"
            label="参数"
            placeholder="参数"
            :rules="[{ required: isEdit, message: '请填写参数' }]"
          />
          <van-field
            v-model="contractTerms.supplierEmail"
            name="供方邮箱"
            label="供方邮箱"
            placeholder="供方邮箱"
            :rules="[{ required: isEdit, message: '请填写供方邮箱' }]"
          />

          <van-cell
            title="需方邮箱"
            :value="contractTerms.customerEmail"
            @click="showFrom = true"
            :rules="[{ required: isEdit, message: '请填写需方邮箱' }]"
          />
          <van-field
            v-model="contractTerms.deliveryDateTerms"
            name="供货时间条款"
            label="供货时间条款"
            placeholder="供货时间条款"
            :rules="[{ required: isEdit, message: '请填写供货时间条款' }]"
          />
          <van-field
            v-model="contractTerms.deliveryDateTermsContent"
            name="条款内容"
            label="条款内容"
            placeholder="条款内容"
            :rules="[{ required: isEdit, message: '请填写条款内容' }]"
          />
          <van-cell
            title="日期参数从"
            :value="contractTerms.dateParamFrom"
            @click="showFrom = true"
            :rules="[{ required: isEdit, message: '请填写日期参数从' }]"
          />
          <van-calendar
            v-model="showFrom"
            :show-confirm="false"
            @confirm="onConfirmFrom"
          />
          <van-cell
            title="日期参数至"
            :value="contractTerms.dateParamTo"
            @click="showTo = true"
            :rules="[{ required: isEdit, message: '请填写日期参数至' }]"
          />
          <van-calendar
            v-model="showTo"
            :show-confirm="false"
            @confirm="onConfirmTo"
          />
        </div>
      </van-cell-group>
    </van-form>
    <van-divider />
    <div style="margin: 16px">
      <van-button type="primary" @click="saveItems(contractTerms)" style="margin-left: 0%; width: 30%"
        >保存</van-button
      >
      <van-button type="primary" @click="goBack()" style="margin-left: 40%; width: 30%"
        >返回</van-button
      >
    </div>
  </div>
</template>
  <script>
import { Notify } from "vant";
import { validateTime } from "@/utils/validate";
import {mapState,mapActions,mapMutations} from "vuex";

export default {
  data() {
    return {
      showFrom: false,
      showTo: false,
      //必填项
      isEdit: false,
    };
  },
  computed:{
    ...mapState({
      contractTerms: state => state.ContractAbout.contract.contractTerms
    })
  },

  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirmFrom(date) {
      this.showFrom = false;
      this.contractTerms.dateParamFrom = this.formatDate(date);
    },
    onConfirmTo(date) {
      this.showTo = false;
      this.contractTerms.dateParamTo = this.formatDate(date);
    },
    ...mapMutations('ContractAbout',["SAVE_ITEMS"]),
    ...mapActions('ContractAbout',["save_items"]),
    saveItems(){
      this.$router.push("contract")
      this.$store.dispatch("ContractAbout/save_items",this.contractTerms)
    },
    goBack(){
      this.$router.push("contract")
    }
  },
};
</script>

  <style>
</style>
